import VxeColumn from './VxeColumn';
import toolButtons from './ToolButtons';
import tableAction from './TableAction';
import { VxeGridInstance, BasicTableProps } from '@/components/VxeTable';
import { ref, reactive } from 'vue';
import tableFilter from '@/components/TableFilter/index.vue';
export const TableRef = ref<VxeGridInstance>();
export const FilterRef = ref<InstanceType<typeof tableFilter>>();
export default {
  FilterRef: ref<InstanceType<typeof tableFilter>>()
};

export const useConfig = (
  queryCall: (param) => Promise<any>,
  bindOpitons?: BasicTableProps | undefined
) => {
  const FilterRef = ref<InstanceType<typeof tableFilter>>();
  const TableRef = ref<VxeGridInstance>();
  const currentData = ref<any>([]);
  return {
    TableRef,
    FilterRef,
    Columns: VxeColumn,
    ToolBtn: toolButtons,
    Action: tableAction,
    TableFilter: tableFilter,
    CurrentData: currentData,
    options: reactive<BasicTableProps>({
      ...bindOpitons,
      showOverflow: '',
      border: true,
      height: 'auto',
      columnConfig: {
        resizable: true
      },
      toolbarConfig: {
        enabled: true,
        export: false,
        zoom: false,
        print: false,
        refresh: true,
        custom: false
      },
      treeConfig: {
        rowField: 'id',
        parentField: 'pid',
        iconOpen: 'vxe-icon-square-minus',
        iconClose: 'vxe-icon-square-plus'
      },
      pagerConfig: {
        enabled: false
      },
      columns: VxeColumn,
      proxyConfig: {
        ajax: {
          query: async ({ form }) => {
            if (
              FilterRef.value &&
              FilterRef.value.conModelsJson &&
              FilterRef.value.conModelsJson.length
            ) {
              form.ConModels = FilterRef.value?.conModelsJson;
            }
            const data = await queryCall({ ...form });
            currentData.value = data;
            return data;
          }
        }
      }
    })
  };
};
